<!DOCTYPE html>
<!-- ng-app -->
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../../../js/plugins/angular/angular.min.js" type="text/javascript"></script>
</head>
<body>
    <div ng-controller="cont">
        <div class="{{cls}}">{{text}}</div>
        <button ng-click="onClick(1)">早上</button>
        <button ng-click="onClick(2)">上午</button>
        <button ng-click="onClick(3)">下午</button>
        <button ng-click="onClick(4)">晚上</button>

    </div>

    <script>
        var app = angular.module('app',[]);
        app.config(function ($provide) {
            $provide.provider('show_1',function () {
                this.$get = function () {
                    return {
                        val : function (name) {
                            return name;
                        }
                    }
                }
            });
        });

        app.config(function ($provide) {
            $provide.provider('show_2',function () {
                this.$get = function () {
                    return {
                        val : function (name) {
                            return name;
                        }
                    }
                }
            });
        });

        app.config(function ($provide) {
            $provide.provider('show_3',function () {
                this.$get = function () {
                    return {
                        val : function (name) {
                            return name;
                        }
                    }
                }
            });
        });

        app.config(function ($provide) {
            $provide.provider('show_4',function () {
                this.$get = function () {
                    return {
                        val : function (name) {
                            return name;
                        }
                    }
                }
            });
        });

        app.controller('cont',function ($scope,show_1,show_2,show_3,show_4) {
            $scope.cls = "";
            $scope.onClick = function (t) {
                $scope.cls = "show";
                switch(t){
                    case 1:
                        $scope.text = show_1.val("早上好！");
                        break;
                    case 2:
                        $scope.text = show_1.val("上午好！");
                        break;
                    case 3:
                        $scope.text = show_1.val("下午好！");
                        break;
                    case 4:
                        $scope.text = show_1.val("晚上好！");
                        break;
                }
            }
        })
    </script>
</body>
</html>